<template>
	<view class="picker-overlay" @click="cancel">
		<view class="picker-content" @click.stop>
			<view class="picker-title">选择营业时间</view>
			<view class="time-row">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							开始时间：
						</view>
						<view class="uni-list-cell-db">
							<picker mode="time" :value="time.start" @change="bindTimeChange('start', $event)">
								<view class="uni-input">{{time.start}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="time-row">
				<view class="uni-list">
					<view class="uni-list-cell">
						<view class="uni-list-cell-left">
							结束时间：
						</view>
						<view class="uni-list-cell-db">
							<picker mode="time" :value="time.end" @change="bindTimeChange('end', $event)"
								:start="endStart">
								<view class="uni-input">{{time.end}}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="picker-buttons">
				<button @click="confirm">确定</button>
				<button @click="cancel">取消</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			start: {
				type: String,
				default: ''
			},
			end: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				time: {
					start: "08:00",
					end: "08:30",
				},
				isValidTime: true,
				endStart: "08:30",
			};
		},
		methods: {
			confirm() {
				// console.log(this.time.start + "-" + this.time.end)
				this.$emit('confirm', {
					...this.time
				});
			},
			cancel() {
				this.$emit('cancel');
			},
			// 修改时间选择
			bindTimeChange(type, e) {
				if (type === 'start') {
					this.time.start = e.detail.value;
					const [hour, minute] = this.time.start.split(':');
					let newHour = parseInt(hour, 10);
					let newMinute = parseInt(minute, 10) + 30;
					if (newMinute >= 60) {
						newHour = (newHour + 1) % 24;
						newMinute = newMinute - 60;
					}
					this.endStart = `${newHour < 10? '0' : ''}${newHour}:${newMinute < 10? '0' : ''}${newMinute}`;
					this.updateEndTimeRange();
				} else {
					this.time.end = e.detail.value
				}
			},
			updateEndTimeRange() {
				const endTimeRange = [];
				const startParts = this.endStart.split(':');
				const startHour = parseInt(startParts[0], 10);
				const startMinute = parseInt(startParts[1], 10);
				for (let hour = startHour; hour <= 23; hour++) {
					if (hour === startHour) {
						endTimeRange.push(`${hour < 10? '0' : ''}${hour}:${startMinute < 10? '0' : ''}${startMinute}`);
					} else {
						endTimeRange.push(`${hour < 10? '0' : ''}${hour}:00`);
						endTimeRange.push(`${hour < 10? '0' : ''}${hour}:30`);
					}
				}
				this.endTimeRange = endTimeRange;
			}
		},
	};
</script>

<style scoped>
	.picker-overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: flex-end;
	}

	.picker-content {
		background: #fff;
		width: 100%;
		padding: 20px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.picker-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.picker-options {
		max-height: 300px;
		overflow-y: auto;
	}

	.picker-option {
		padding: 10px 0;
		border-bottom: 1px solid #f0f0f0;
		font-size: 16px;
	}

	.picker-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.picker-buttons button {
		flex: 1;
		margin: 0 5px;
		padding: 10px 0;
		background: #65c61d;
		color: #fff;
		border: none;
		border-radius: 5px;
		font-size: 16px;
		cursor: pointer;
	}

	.uni-list-cell {
		display: flex;
		padding: 20rpx 0;
	}

	.uni-list-cell-db {
		width: 500rpx;
	}
</style>